<template>
    <div>
        <ConditionCard
            body-style="padding: 24px"
            class="groupList-addUser"
            @search="queryTableList"
            @reset="reset"
        >
            <el-form
                ref="queryForm"
                :model="queryForm.condition"
                label-width="80px"
                label-suffix="："
            >
                <el-row>
                    <el-col :span="8">
                        <el-form-item :label="$t('schoolAdministration.auditStatus')">
                            <el-select v-model="queryForm.condition.status" style="width: 100%">
                                <el-option
                                    v-for="item in options.status"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </ConditionCard>
        <el-card>
            <el-row
                slot="header"
                type="flex"
                justify="space-between"
                align="center"
            >
                <el-col :span="6">
                    <h1>{{$t('schoolAdministration.creditRecognitionList')}}</h1>
                </el-col>
                <el-col :span="6" style="text-align:right">
                    <el-button type="primary" :disabled="!tableList.length > 0" @click="downLoad">
                        {{$t('schoolAdministration.instructionsDownload')}}
                    </el-button>
                    <el-button type="primary" @click="operate('ADD')">{{$t('schoolAdministration.apply')}}</el-button>
                </el-col>
            </el-row>
            <edu-table
                :data="tableList"
                :order="false"
                style="width: 100%"
                ref="applyTable"
                :total="queryForm.total_"
                :pageSize="queryForm.pageSize_"
                @page-change="onCurrentPageChange"
                @selection-change="handleSelectionChange"
            >
                <el-table-column :label="$t('schoolAdministration.studentNumber')" prop="studentId"></el-table-column>
                <el-table-column :label="$t('schoolAdministration.fullName')" prop="studentName"></el-table-column>
                <el-table-column
                    :label="$t('schoolAdministration.exchangeName')"
                    prop="exchangeName"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    :label="$t('schoolAdministration.oldCourseStr')"
                    prop="oldCourseStr"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    :label="$t('schoolAdministration.cognizanceYearAndSemester')"
                    show-overflow-tooltip
                >
					 <template slot-scope="scope">
                        <span>{{ scope.row.newCourseList[0] && scope.row.newCourseList[0].identifyCalendarName }}</span>
                    </template>
				</el-table-column>
                <el-table-column :label="$t('schoolAdministration.identifyCourses')" prop="oldCourseName" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>{{ scope.row.newCourseList[0] && scope.row.newCourseList[0].courseName }}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('schoolAdministration.recognitionResults')" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>
                            {{
                                getStatus(
                                    'scoreTypeList',
                                    scope.row.newCourseList[0] && scope.row.newCourseList[0].newCourseScore
                                ) &&
                                    getStatus(
                                        'scoreTypeList',
                                        scope.row.newCourseList[0] && scope.row.newCourseList[0].newCourseScore
                                    )['label']
                            }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('schoolAdministration.auditStatus')">
                    <template slot-scope="scope">
                        <el-tag :type="getStatus('status', scope.row.approvalStatus)['type']">
                            {{ getStatus('status', scope.row.approvalStatus)['label'] }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('schoolAdministration.operate')">
                    <template slot-scope="scope">
                        <el-button type="text" @click="operate('RECALL', scope.row)" v-if="scope.row.approvalStatus == 4">{{$t('exchangeApproval.revoke')}}</el-button>
                        <el-button type="text" @click="operate('VIEW', scope.row)">{{$t('schoolAdministration.check')}}</el-button>
                        <el-button
                            type="text"
                            v-if="!scope.row.approvalStatus || scope.row.approvalStatus === 2"
                            @click="operate('EDIT', scope.row)"
                        >
                            {{$t('schoolAdministration.edit')}}
                        </el-button>
                    </template>
                </el-table-column>
            </edu-table>
        </el-card>
    </div>
</template>

<script>
import minxin from 'common/src/mixins/index.js'
import {
    getTableList,
    getScopeTypeList,
    checkTimeConfig,
    creditAuthPdf,
    creditRecall
} from 'common/src/api/internationalExchanges/creditApplication'
export default {
    mixins: [minxin],
    data() {
        return {
            queryForm: {
                total_: 0,
                pageNum_: 1,
                pageSize_: 20,
                condition: {
                    status: ''
                }
            },
            tableList: [],
            multipleSelection: [],
            options: {
                status: [
                    {
                        value: 0,
                        label: '草稿',
                        type: 'info'
                    },
                    {
                        value: 1,
                        label: '审核中',
                        type: ''
                    },
                    {
                        value: 2,
                        label: '已驳回',
                        type: 'warning'
                    },
                    {
                        value: 3,
                        label: '已通过',
                        type: 'success'
                    },
                    {
                        value: 4,
                        label: '已提交',
                        type: 'success'
                    }
                ],
                scoreTypeList: []
            }
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            await this.queryScopeTypeList()
            await this.queryTableList()
        },
        async queryTableList(params = this.queryForm) {
            let { code, data } = await getTableList(params)
            if (code !== 200) return
            data.list.forEach(ele => {
                ele.newCourseList = ele.newCourseList || [];
                ele.newCourseList.forEach(item => {
                    ;(item.courseCode = item.newCourseCode),
                        (item.courseName = item.newCourseName),
                        (item.creidits = item.newCredit)
                })
                ele.oldCourseStr = '';
                (ele.oldCourseList || []).forEach((item, index) => {
                    if (ele.oldCourseList.length == index + 1) {
                        ele.oldCourseStr += item.oldCourseName
                    } else {
                        ele.oldCourseStr += `${item.oldCourseName}、`
                    }
                })
            })
            this.tableList = data.list
            this.queryForm.total_ = data.total_
            this.queryForm.pageNum_ = data.pageNum_
            this.queryForm.pageSize_ = data.pageSize_
        },
        async queryScopeTypeList() {
            let { code, data } = await getScopeTypeList()
            if (code !== 200) return
            this.options.scoreTypeList =
                data[0] &&
                data[0].scoreDetail.map(item => {
                    return {
                        value: item.scoreNum,
                        label: item.scoreName
                    }
                })
        },
        getStatus(exp, value = 0) {
            let list = this.options[exp]
            let obj = list.find(item => item.value == value)
            return obj || {}
        },
        onCurrentPageChange(pager) {
            this.queryForm.pageSize_ = pager.pageSize
            this.queryForm.pageNum_ = pager.pageNum
            this.queryTableList()
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        reset() {
            this.queryForm = {
                total_: 0,
                pageNum_: 1,
                pageSize_: 20,
                condition: {
                    status: ''
                }
            }
            this.queryTableList()
        },
        async checkConfig(cb) {
            let { code, data } = await checkTimeConfig()
            if (code !== 200) return
            if (data.allowFlag) {
                cb()
            } else {
                this.$message({
                    type: 'warning',
                    message: '当前时间未在申请时间段内，请联系管理员'
                })
            }
        },
        jump(mode, data) {
            let sign = mode === 'ADD'
            let curUser = this.global.currentUser
            let studentInfo = {
                grade: sign ? curUser.grade : data.grade,
                studentName: sign ? curUser.name : data.studentName,
                studentId: sign ? curUser.uid : data.studentId
            }
            this.$router.push({
                path: '/UGIECreditDetail',
                query: {
                    mode,
                    data,
                    type: 0,
                    studentInfo
                }
            })
        },
        operate(mode, data) {
            // 校验是否可以申请
            if (mode === 'ADD') {
                this.checkConfig(cb => {
                    this.jump(mode, data)
                })
            }else if (mode === 'RECALL') {
                this.recall(data);
            }else {
                this.jump(mode, data)
            }
        },
        recall(row) {
            this.$confirm('此操作将撤销此条审请记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                creditRecall(row.approvalId).then(res =>{
                    if (res.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '撤销成功'
                        })
                        this.queryTableList();
                    }
                })
            })
        },
        downLoad() {
            let message =""
            let checkVaild = function(array=[]){
                let status  = true
                if(array.length ===0){
                    status = false
                    message = "请勾选数据"
                }else{
                    for(let i =0;i<array.length;i++){
                        if(array[i].approvalStatus !==3){
                            status = false
                            message = "仅可以勾选审核通过的数据"
                            break
                        }
                    }
                }
                return status;
            }
            if (checkVaild(this.multipleSelection)) {
                let currentUser = this.multipleSelection[0]
                let selectedItems = this.multipleSelection.map(item=>{
                    return {
                        id:item.id,
                        exchangeName:item.exchangeName
                    }
                })
                creditAuthPdf(
                    Object.assign({
                        studentId: currentUser.studentId,
                        selectedItems:selectedItems
                    })
                )
            }else{
                this.$message({
                    type: 'warning',
                    message: message
                })
            }
        }
    }
}
</script>

<style>
</style>
